<template>
	<view class="confirm_rich">
		<view class="address-section_rich" @click="gotoAddress">
			<view class="order-content_rich">
				<text class="yticon icon-shouhuodizhi_rich"></text>
				<view class="cen" v-if="address">
					<view class="top">
						<text class="name">{{ address.realname }}</text>
						<text class="mobile">{{ address.telephone }}</text>
					</view>
					<text class="address">{{ address.provinceStr || '' }} {{ address.cityStr || '' }}
						{{ address.areaStr || '' }} {{ address.street || '' }}</text>
				</view>
				<view class="cen" v-else>请填写收货地址</view>
				<text class="yticon icon-you"></text>
			</view>
			<image src="static/line11.png" class="a-bg-rich" />
		</view>

		<view class="goods-section-rich">
			<view class="g-header-rich b-b">
				<text class="name">商品信息</text>
			</view>
			<view class="g-item-rich">
				<image :src="productDescDetail.productImage || productDescDetail.productImg"></image>
				<view class="right">
					<text class="title clamp">{{ productDescDetail.productName }}</text>
					<text class="spec">
						规格：{{productDescDetail.specName}}
					</text>
					<view class="price-box-rich">
						<text class="price">￥{{ productDescDetail.salePrice }}</text>
						<text class="number">x 1</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 增值服务 -->
		<view class="container-rich" v-if="services.length > 0">
			<view v-for="(item, index) in services" :key="index" class="item fxpad">
				<view class="left">
					{{ item.shopAdditionalServices.name }}
					<image @click="getServicesData(item.shopAdditionalServices)" src="../../static/product/sm.png"
						mode="scaleToFill" class="sm"></image>
				</view>
				<view class="right">
					￥{{ item.shopAdditionalServices.price }}
					<!-- <image src="/static/orderList/inactive.png" :class="{
                            checkIcon: true,
                            hide: servicesId.findIndex((id) => id === item.shopAdditionalServices.id) > -1
                        }" @click="addSrvicesId(item.shopAdditionalServices.id)" style="margin-left: 10rpx" />
					<image src="/static/orderList/active.png" style="margin-left: 10rpx" :class="{
                            checkIcon: true,
                            hide: servicesId.findIndex((id) => id === item.shopAdditionalServices.id) === -1
                        }" /> -->
				</view>
			</view>
		</view>

		<view class="yt-list-rich">
			<!-- <view class="yt-list-cell-rich b-b" @click="show_coupon()">
				<view class="cell-icon">券</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active">选择优惠券</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view> -->
			<!-- <view class="yt-list-cell-rich b-b">
				<text class="cell-tit clamp">碎屏险</text>
				<text class="cell-tip">￥398</text>
			</view> -->
			<!-- <view class="yt-list-cell-rich b-b">
				<text class="cell-tit clamp">首期应付</text>
				<text class="cell-tip" style="color: red;">￥{{orderPrices.firstPeriodsRentPrice}}</text>
			</view> -->
			<view class="yt-list-cell-rich b-b" v-if="orderPrices.totalPeriods!=0">
				<text class="cell-tit clamp">剩余付款计划</text>
				<view style="display: flex;align-items: center;" @click="openRepayment">
					<text
						class="cell-tip">￥{{orderPrices.firstPeriodsPrice}}X{{((orderPrices.orderByStagesDtoList)[0])['totalPeriods']}}期</text>
					<image src="../../static/my/black_jiantou.png" mode="aspectFit"
						style="width: 15rpx;height: 24rpx;margin-left: 6rpx;"></image>
				</view>
			</view>
			<view class="yt-list-cell-rich b-b">
				<text class="cell-tit clamp">商品合计</text>
				<text class="cell-tip">￥{{ productDescDetail.salePrice }}</text>
			</view>
			<view class="yt-list-cell-rich b-b">
				<text class="cell-tit clamp">付款方式</text>
				<text class="cell-tip">{{ isBuyOutOrSend == 4 ? '租完即送' : '租完买断' }}</text>
			</view>
			<view class="yt-list-cell-rich b-b">
				<text class="cell-tit clamp">物流配送</text>
				<!-- <text class="cell-tip">{{ freightType[productDescDetail.productFreightType] }}</text> -->
				<text class="cell-tip">顺丰快递</text>
			</view>
			<view class="yt-list-cell-rich b-b" v-if="!loadingShiming && !hasCertification">
				<text class="cell-tit clamp">实名认证</text>
				<text class="cell-tip">
					<view class="item2" @click="$onTo('/pagesMy/certificates/certificates')">
						<text>去认证</text>
						<image mode="scaleToFill" class="arrow" src="../../static/my/jiantou.png"></image>
					</view>
				</text>
			</view>

			<view class="yt-list-cell-rich desc-cell" style="border-bottom: 1px solid #ebebeb">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" @input="getRemark" placeholder="请填写备注信息"
					placeholder-class="placeholder" />
			</view>
		</view>
		<view v-if="isBuyOutOrSend != 1" class="agreement-rich" style="background: #fff">
			<image src="/static/orderList/active.png" :class="{
                    checked: true,
                    hide: !isChecked
                }" mode="scaleToFill" @click="getChecked"></image>
			<image :class="{
                    checked: true,
                    hide: isChecked
                }" src="/static/orderList/inactive.png" mode="scaleToFill" @click="getChecked"></image>
			<view style="width: calc(100vw - 90rpx); float: right">
				<text>
					<text @click="getChecked">我已阅读并同意签署</text>
					<text class="xieyi" @click="openTanChuang">《商品租赁协议》</text>
				</text>

				<view class="mengceng-rich" v-if="mengcengShow" @click="tab_mengceng"
					@touchmove.stop.prevent="moveHandle">
				</view>
				<view class="xieyi-tan-rich" v-if="tankuangShow" @touchmove.stop.prevent="moveHandle">
					<view style="margin-top: 20rpx; font-size: 36rpx">商品租赁相关服务协议</view>
					<!-- <view style="font-size: 25rpx;color: rgb(1, 1, 1);">我已阅读并同意签署以下合同</view> -->
					<!-- 弹窗协议 -->
					<!-- 协议选项卡 -->
					<scroll-view scroll-y="true" class="scroll-xieyiy-rich">
						<view class="xieyi-item-rich">
							<view class="nav_item-rich item-yinsi-rich">
								<u-parse :html="pdfUrl"></u-parse>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer-rich">
			<!-- <view class="price-content-rich">
				<text>首期需付</text>
				<text class="price-tip-rich">￥</text>
				<text class="price">{{ isBuyOutOrSend == 2 ? 0 : productDescDetail.salePrice }}</text>
			</view> -->
			<view class="price-content-rich">
				<text>商品数量:</text>
				<text class="price-tip-rich">共</text>
				<text class="price">1件</text>
			</view>
			<text class="submit" @click="onOk1">提交订单</text>
		</view>

		<!-- 增值服务详情 -->
		<wyb-popup ref="serviceDetails" type="bottom" width="500" radius="6" :showCloseIcon="true"
			:title="serviceDetailsTitle" bgColor="rgba(247, 248, 251, 1)" @zengzishow="zuqishow">
			<view class="servicesContent-rich" v-if="zzshow">
				<view style="font-size: 16px; font-weight: bold">{{ serviceDetailsTitle }}</view>
				<view style="margin: 20px; text-align: left">{{ serviceDetailsContent }}</view>
			</view>
		</wyb-popup>
		<!--  -->
		<wyb-popup ref="eachIssue" type="bottom" width="500" radius="6" :showCloseIcon="true" title="租金支付计划"
			bgColor="rgba(247, 248, 251, 1)" @zuqishow="zuqishow">
			<view class="eachIssueTitle-rich">可提前主动支付</view>
			<view class="eachIssue" v-if="zjShow">
				<view class="item" v-for="(item, index) in orderPrices.orderByStagesDtoList" :key="index"
					v-if="item.currentPeriodsRent > 0" @click="FengKong_XingWei('点击' + item.currentPeriods + '期租金区域')">
					<view class="mark" v-if="index === 0">今日支付</view>
					<view class="text1">{{ item.currentPeriods == 0 ? '增值服务' : '第' + item.currentPeriods + '期' }}</view>
					<view class="text2">￥{{ item.currentPeriodsRent }}</view>
					<view class="text3">{{ item.statementDate }}</view>
				</view>
			</view>
		</wyb-popup>
		<!-- 可用优惠券 -->
		<wyb-popup ref="couponList" type="bottom" width="500" radius="6" :showCloseIcon="true" title="可用优惠券"
			bgColor="rgba(247, 248, 251, 1)" @youhuishow="zuqishow">
			<view class="coupons-rich" v-if="yhShow">
				<view class="coupon-item-rich" v-for="(item, index) in orderCouponList" :key="index"
					@click="onIsCheck(index, item)">
					<view class="item-left-rich">
						<view>
							<view class="title">
								<text style="font-size: 24rpx">￥</text>
								{{ item.discountAmount }}
							</view>
						</view>
						<view class="item-content-rich">
							<view class="title">满{{ item.minAmount }}减{{ item.discountAmount }}</view>
							<view class="fu">{{ item.endTime }}到期</view>
						</view>
					</view>
					<view class="item-right-rich">
						<image src="/static/orderList/inactive.png" :class="{
                                checkIcon: true,
                                hide: item.check
                            }" />
						<image src="/static/orderList/active.png" :class="{
                                checkIcon: true,
                                hide: !item.check
                            }" />
					</view>
				</view>
			</view>
		</wyb-popup>
		<party-cover @partCoverCall="partCoverCall" ref="partCover" />
		<u-modal v-model="showOrderDupli" content="订单已生成!" @confirm="confirmDuplicate" confirm-text="查看订单"></u-modal>
		<u-modal v-model="showUploadPhoneModal" title="温馨提示" show-cancel-button @confirm="confirmlUpload"
			@cancel="cancelUpload" confirm-text="拍照" cancel-text="取消">
			<view class="slot-content">
				<view style="margin: 80rpx 40rpx; text-indent: 2em; color: #666">下单需要您上传本人人脸照片来核实身份，感谢您的配合!</view>
			</view>
		</u-modal>

		<wyb-popup ref="PaymentSelect" type="bottom" height="500" radius="6" :showCloseIcon="true">
			<view class="PaymentSelectBox-rich">
				<view class="tit">请选择支付方式</view>
				<view v-if="zfbHasPayment">
					<view v-show="!zhifubaoCheckedState">
						<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add-rich/zhifubao1-rich.png" mode="aspectFit"></image>
					</view>
					<view v-show="zhifubaoCheckedState">
						<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add-rich/zhifubao-rich.png" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="wxHasPayment">
					<view v-show="!weixinCheckedState">
						<image @click="tab_weixin" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add-rich/weixin1-rich.png" mode="aspectFit"></image>
					</view>
					<view v-show="weixinCheckedState">
						<image @click="tab_weixin" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add-rich/weixin-rich.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="determine" @click="determine_btn">确定</view>
			</view>
		</wyb-popup>

		<!-- 租赁剩余还款计划 -->
		<wyb-popup ref="remainRepayment" type="bottom" radius="6" :showCloseIcon="true" bgColor="#f1f2f3">
			<view class="remainRepaymentBox">
				<view class="repayTie">可提前主动支付</view>
				<view class="numPeriods">
					<view class="zero" v-if="Object.keys(zeroPeriodsObj).length != 0">
						<view>
							<view class="top">
								<text style="margin-right: 20rpx;">增值服务</text>
								<text>￥{{zeroPeriodsObj.currentPeriodsRent}}</text>
							</view>
							<text class="time">{{zeroPeriodsObj.statementDate}}</text>
							<!-- <text class="todayPay">今日支付</text> -->
						</view>
					</view>
					<view class="numPeriods_item" v-for="(item,index) in nonZeroPeriodsList" :key="index">
						<view class="top">
							<text style="margin-right: 20rpx;">第{{item.currentPeriods}}期</text>
							<text>￥{{item.currentPeriodsRent}}</text>
						</view>
						<text class="time">{{item.statementDate}}</text>
					</view>
				</view>
			</view>
		</wyb-popup>

		<apptet-login ref="modalForm" @noticeRefresh="noticeRefresh"></apptet-login>
	</view>
</template>
<script>
	import {
		request,
		getUserReceive,
		getUserId,
		saveUserId,
		saveUserTel,
		checkHasPhone
	} from '@/utils/index.js';
	import {
		tradePay,
	} from '@/utils/platform.js';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import partyCover from '../../components/partyCover/index.vue';
	import {
		APP_APPID,
	} from '../../utils/constant';
	import globalData from '@/utils/globalData';

	export default {
		data() {
			return {
				zfbUid: '',
				zfbHasPayment: true,
				wxHasPayment: true,
				weixinCheckedState: false,
				zhifubaoCheckedState: false,
				faceImgUrls: '',
				showOrderDupli: false,
				showUploadPhoneModal: false,
				duration: 1, //	租用天数
				skuId: 42819, //商品规格ID
				//新增租完买断或者租完即送08-22 start
				isBuyOutOrSend: 0,
				//新增租完买断或者租完即送08-22 end
				orderCouponList: [], //优惠券列表
				reduction: 0, //优惠券减免
				services: [], //增值服务列表
				servicesId: [], //增值服务列表id
				serviceDetailsTitle: '', //增值服务标题
				serviceDetailsContent: '', //增值服务内容
				isauth: null,
				freightType: {
					//运费类型判断
					FREE: '商家包邮',
					PAY: '用户支付',
					SELF: '自提'
				},
				orderLocationAddress: {}, //地址信息
				jingweiLocationAdd: {
					latitude: '',
					longitude: ''
				},
				antiCheatingLevel: '', //营销反作弊字段
				nsfLevel: '', //用户风险
				couponId: '', //优惠券code
				isChecked: false, //是否签署协议
				//需要重新渲染数据
				orderPrices: {}, //金额数据
				address: {}, //收货地址
				remark: '', //用户留言
				hasCertification: false, //是否实名认证过  //绕过实名  上线注意改为false
				loadingShiming: true, // 正在加载实名认证信息
				isXuzu: false, // 判断是续租
				productDescDetail: {}, // 商品描述对象
				xuzuGlobalData: {}, // 续租功能的hzsx/api/orderRelet/userOrderReletConfirm接口所返回的数据,
				appid: APP_APPID,
				sales_p: '',
				freeType: 0,
				skuNum: 1,
				pdfUrl: '',
				zjShow: false,
				yhShow: false,
				zzshow: false,
				rentAndbuyMark: 0, //买或者租的状态  1是租    2是买
				specValue: '', //买：商品规格
				productName: '', //，买：商品名称
				productImg: '', //买：商品图片
				productId: '', //买：商品id
				salePriceSum: '', //买：需要支付的总金额
				dataArr: '', //买的：res,data
				mengcengShow: false,
				tankuangShow: false,
				userReceive: '',
				zeroPeriodsObj: {}, //0期的数据（增值服务的）
				nonZeroPeriodsList: [], //正常的期数（0期除外）
			};
		},
		components: {
			wybPopup,
			partyCover
		},
		onInit() {
			this.$goLogin();
		},
		onLoad(e) {
			console.log('--eeeee---', e);
			// #ifdef APP-PLUS || H5
			this.zfbUid = this.getUrlCode1().uid
			// #endif
			if (this.zfbUid) {
				saveUserId(this.zfbUid)
				saveUserTel(this.getUrlCode1().telephone)
				this.duration = this.getUrlCode1().duration;
				this.isBuyOutOrSend = this.getUrlCode1().isBuyOutOrSend;
				this.skuId = this.getUrlCode1().skuId;
			} else {
				this.isXuzu = e.isXuzu == '1'; // 判断是否是续租功能
				this.duration = e.duration;
				this.skuId = e.skuId;
				this.isBuyOutOrSend = e.isBuyOutOrSend;
				this.sales_p = e.sales_p;
				this.skuNum = e.skuNum;
				this.specValue = e.specValue;
				this.productName = e.productName;
				this.productImg = e.productImg;
				this.productId = e.productId;
				this.shopId = e.shopId;
			}
			let isauth = uni.getStorageSync('auth');
			this.getdinweiRich();
			this.isauth = isauth;

			this.getPaymentList()
			this.onConfirm();
			this.userReceive = getUserReceive()
		},
		onShareAppMessage() {
			return {
				title: this.$getGlobalData('information').appTitle,
				desc: `来${this.$getGlobalData('information').appTitle}，租好物`,
				path: '/pages/index/index'
			};
		},
		onShow() {
			let that = this;
			this.address = this.$getGlobalData('address') || {};
			setTimeout(function() {
				that.loadingShiming = true;
				that.$request('member/mall/userCertification/hasCertification', {}, 'get', true, true)
					.then((res) => {
						const canxiadan = ['UN_UPLOAD', 'FINISH']; // 前者表示未上传照片，后者表示已认证
						//that.hasCertification = true;
						that.hasCertification = canxiadan.includes(res.data);
					})
					.finally(() => {
						that.loadingShiming = false;
					});
			}, 300);
		},
		methods: {
			noticeRefresh() {
				console.log('商品页面支付宝小程序登录成功');
			},
			//租赁剩余还款计划
			openRepayment() {
				this.$refs.remainRepayment.show()
			},


			getUrlCode1() {
				// 截取url中的code方法
				// var url =
				// 'https://testh5.chaorenshegou.com/#/pagesClass-rich/confirm-rich/confirm-rich?other=1&duration=9&telephone=15516576935&uid=28e86b182e7fcba67a2c06dc5b85246cb2dd4773dp7tx9sd4xki&isBuyOutOrSend=2&skuId=10181';
				var url = window.location.href
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			//支付宝刷脸返回后走的回调。通知刷脸动作已经完成
			zfbFace() {
				uni.showLoading({
					title: '加载中'
				});
				let queryData = {
					passed: true,
					uid: this.zfbUid
				}
				this.$request("order/mall/api/order/faceAuthInitAsync", queryData, "get")
					.then(() => {
						uni.hideLoading();
						this.onOkCallback()
						// let timer1 = null
						// timer1 = setTimeout(() => {
						// 	this.fetchOrderList()
						// 	clearTimeout(timer1);
						// 	timer1 = null
						// }, 100); // 延迟0.1秒
					})
			},
			//动态获取用户的支付方式（hlb-合利宝，zfb-支付宝，wx-微信）
			getPaymentList() {
				this.$request('order/mall/components/getPayChannelList', {}, 'get', false).then((res) => {
					if (res.data && res.data.length > 0) {
						this.zfbHasPayment = res.data.some(item => item.type == 'zfb')
						this.wxHasPayment = res.data.some(item => item.type == 'wx')
					}
				});
			},
			tab_zhifubao() {
				this.zhifubaoCheckedState = !this.zhifubaoCheckedState;
				this.weixinCheckedState = false;
			},
			tab_weixin() {
				this.weixinCheckedState = !this.weixinCheckedState;
				this.zhifubaoCheckedState = false;
			},
			determine_btn() {
				this.$refs.PaymentSelect.close()
				this.onOkCallback();
			},
			getdinweiRich(iscf = 0) {
				let that = this;
				//#ifdef MP-ALIPAY
				my.getLocation({
					type: 2,
					success: (res) => {
						let _streetNumber = '';
						let _orderLocationAddress = res;
						_orderLocationAddress.streetNumber =
							`${res.streetNumber.street}${res.streetNumber.number}`;
						_orderLocationAddress.pois = '';
						this.orderLocationAddress = {
							..._orderLocationAddress
						};
						console.log('定位', _orderLocationAddress);
						console.log('下单页面手机的定位信息', this.orderLocationAddress);
					},
					fail: (res) => {
						if (iscf == 0) {
							uni.showModal({
								title: '地址获取失败',
								content: '获取定位失败会影响到您的订单审核，您可以点击获取定位重新获取，或者取消直接提交',
								cancelText: '取消', // 取消按钮的文字
								confirmText: '获取定位', // 确认按钮文字
								success: (res) => {
									if (res.confirm) {
										that.getdinweiRich(1);
									} else {
										console.log('用户拒绝了');
									}
								}
							});
						}
						//弹窗提醒一下，会导致审核失败
					}
				});
				//#endif

				//#ifdef MP-WEIXIN || APP-PLUS || H5
				uni.getLocation({
					// type: 'gcj02', //gcj02 返回国测局坐标，App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log('经纬度信息信息信息信息学信息===========success===', res);
						//#ifdef APP-PLUS || H5
						that.jingweiLocationAdd.latitude = res.latitude
						that.jingweiLocationAdd.longitude = res.longitude
						console.log('===经纬度的第一次配置==', that.jingweiLocationAdd);
						//#endif
						//#ifdef MP-WEIXIN
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
						if (!!that.mapKey) {
							const tMap = new QQMapWX({
								key: that.mapKey //
							});
							console.log('2222222222222222---this.mapKey', that.mapKey);
							tMap.reverseGeocoder({
								location: {
									latitude: that.latitude,
									longitude: that.longitude
								},
								success: function(res) {
									console.log('解析地址成功====', res);
									that.orderLocationAddress.province = res.result.ad_info
										.province;
									that.orderLocationAddress.city = res.result.ad_info.city;
									that.orderLocationAddress.district = res.result.ad_info
										.district;
									that.orderLocationAddress.streetNumber = res.result
										.address_component.street_number;
									that.orderLocationAddress.latitude = res.result.ad_info
										.location.lat;
									that.orderLocationAddress.longitude = res.result.ad_info
										.location.lng;
									that.orderLocationAddress.cityAdcode = res.result.ad_info
										.city_code;
									that.orderLocationAddress.districtAdcode = res.result.ad_info
										.adcode;
									console.log('orderLocationAddress-微信小程序', that
										.orderLocationAddress);
									//保存缓存
									uni.setStorage({
										key: 'local',
										data: res.result.address,
										success() {
											console.log('用户地址信息已缓存');
										}
									});
								},
								fail: function(res) {
									uni.showToast({
										title: '定位失败',
										duration: 2000,
										icon: 'none'
									});
									console.log(res);
								}
							});
						}
						//#endif
					},
					fail: (res) => {
						var adrage = uni.getStorageSync('adrage');
						console.log("uni.getStorageSync('adrage')");
						if (adrage != '023') {
							if (iscf == 0) {
								uni.showModal({
									title: '地址获取失败',
									content: '获取定位失败会影响到您的订单审核，您可以点击获取定位重新获取，或者取消直接提交',
									cancelText: '取消', // 取消按钮的文字
									confirmText: '获取定位', // 确认按钮文字
									success: (res) => {
										if (res.confirm) {
											that.getdinweiRich(1);
										} else {
											console.log('用户拒绝了');
										}
									}
								});
							}
							uni.setStorageSync('adrage', '023');
						}
					}
				});
				//#endif
			},
			eachIssue() {
				this.$refs.eachIssue.show();
				this.zjShow = true;
			},
			zuqishow() {
				this.zjShow = false;
				this.yhShow = false;
				this.zzshow = false;
			},
			show_coupon() {
				if (this.orderCouponList.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无优惠券'
					});
					return false;
				}
				this.$refs.couponList.show();
				this.yhShow = true;
			},


			// 点击阅读并同意协议 打开弹窗
			openTanChuang() {
				uni.showLoading({
					title: '协议加载中'
				});
				this.mengcengShow = true;
				this.tankuangShow = true;
				this.getZulin().then(() => uni.hideLoading());
			},

			//点击蒙层关闭弹窗
			tab_mengceng() {
				this.mengcengShow = false;
				this.tankuangShow = false;
			},

			onConfirm() {
				if (this.isXuzu) return; // 续租的话就不请求了
				return this.$request(
					'order/mall/liteUserOrders/confirm', {
						skuId: this.skuId,
						duration: this.duration,
						uid: this.$getUid(),
						isBuyOutOrSend: this.isBuyOutOrSend,
						num: this.skuNum,
						loading: true
					},
					'post'
				).then((res) => {
					console.log('租的产品信息=================', res);
					this.productDescDetail = res.data;
					this.orderCouponList = res.data.orderCouponList;
					this.services = res.data.additionalServices;
					this.servicesId = res.data.additionalServices.map((item) => item.shopAdditionalServicesId);
					this.address = res.data.address;
					this.orderPrices = res.data.orderPrices;
					this.freeType = res.data.freeType;
					this.$setGlobalData('address', res.data.address);
					//剩余还款计划
					if (this.orderPrices.orderByStagesDtoList && this.orderPrices.orderByStagesDtoList.length >
						0) {
						let zeroPeriods = this.orderPrices.orderByStagesDtoList.slice(-1)[0]
						if (zeroPeriods.currentPeriods == 0) {
							//0期存在，即增值服务存在，单独显示
							this.zeroPeriodsObj = zeroPeriods
						} else {
							//其他期数
							this.zeroPeriodsObj = {}
						}

						//计算其他期数（0期除外的）
						this.nonZeroPeriodsList = []
						this.orderPrices.orderByStagesDtoList.forEach((item, index) => {
							if (item.currentPeriods != 0) {
								this.nonZeroPeriodsList.push(item)
							}
						})
						console.log('正常的期数(0期除外)', this.nonZeroPeriodsList);
					}


					if (this.zfbUid && this.productDescDetail.faceRecognition) {
						this.onOkCallback();
					}
					if (this.zfbUid && !this.productDescDetail.faceRecognition) {
						uni.showToast({
							title: '人脸核验失败，请返回重新下单！',
							duration: 5000,
							icon: 'none'
						});
					}
				});
			},
			// 订单订阅
			onDingYue() {
				my.getAuthCode({
					// 订单服务授权：order_service。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
					scopes: ['order_service'],
					success: (res) => {
						// 订单服务授权成功
						this.$onTo('pagesMy/orderList/orderList', false, true);
					},
					fail: (res) => {
						// 订单服务授权失败，根据自己的业务场景来进行错误处理
						this.$onTo('pagesMy/orderList/orderList', false, true);
					}
				});
			},
			//选择优惠券
			onIsCheck(index, red) {
				let goodList = this.orderCouponList;
				if (goodList[index]['check']) {
					console.log('111==');
					goodList[index]['check'] = false;
					this.reduction = 0;
					this.couponId = '';
					this.$refs.couponList.hide();
					this.geTrail();
				} else {
					console.log('222==');
					let indexCheck = goodList.findIndex((item) => item.check === true);
					if (indexCheck !== -1) {
						goodList[indexCheck]['check'] = false;
					}
					this.$refs.couponList.hide();
					this.reduction = red.discountAmount;
					this.couponId = red.code;
					goodList[index]['check'] = true;
					this.geTrail();
				}
				this.orderCouponList = goodList;
			},
			//增加增值服务
			addSrvicesId(id) {
				let _servicesId = this.servicesId;
				_servicesId.push(id);
				this.servicesId = _servicesId;
				this.geTrail();
			},
			getServicesData(val) {
				this.serviceDetailsTitle = val.name;
				this.serviceDetailsContent = val.content + val.description;
				this.$refs.serviceDetails.show();
				this.zzshow = true;
			},
			//获取营销反作弊用户数据和用户风险
			gotoAddress() {
				this.$onTo('/pagesMy/address-rich/address-rich');
				return false;
			},
			//切换isChecked
			getChecked() {
				this.isChecked = !this.isChecked;
			},
			//价格试算
			geTrail() {
				this.$request(
					'order/mall/liteUserOrders/trail', {
						skuId: this.skuId,
						duration: this.duration,
						uid: this.$getUid(),
						additionalServicesIds: this.servicesId,
						couponId: this.couponId
					},
					'post'
				).then((res) => {
					console.log('9999===优惠卷', res);
					this.orderPrices = res.data;
					console.log('geTrail', res);
				});
			},
			/**
			 * 获取金额的小数点前、后的数据
			 * @param {Boolean} isFront : 是否是前半部分
			 */
			getPartMoney(isFront, price) {
				let baoxian__ = uni.getStorageSync('baoxian__');
				if (baoxian__.shoufu !== false) {
					return baoxian__.shoufu;
				}
				const _price = price || '';
				if (!_price) return '-';
				const list = _price.toString().split('.');
				const result = isFront ? list[0] : list[1];
				return result || 0;
			},
			//获取用户留言
			getRemark(e) {
				this.remark = e.detail.value;
			},

			//提交支付前的弹窗提醒
			onOk1() {
				// #ifndef H5 || APP-PLUS
				let isPhone = checkHasPhone();
				if (!isPhone) {
					this.$refs.modalForm.toLogin();
					return;
				}
				// #endif
				if (!this.productDescDetail.productName || !this.productDescDetail.specName) {
					uni.showToast({
						icon: 'none',
						title: '数据加载中'
					});
					return false;
				}
				var that = this;
				if (this.isBuyOutOrSend != 1) {
					if (!this.isChecked) {
						uni.showToast({
							icon: 'none',
							title: '请阅读左下方协议并同意'
						});
						return;
					}

					uni.showModal({
						title: '温馨提示',
						content: '请仔细阅读各项协议!',
						confirmText: '确定',
						cancelText: '取消',
						success: function(res) {
							if (res.confirm) {
								that.onOk();
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					that.onOk();
				}
			},

			//租机--提交支付
			onOk() {
				if (!this.productDescDetail.productName || !this.productDescDetail.specName) {
					uni.showToast({
						icon: 'none',
						title: '数据加载中'
					});
					return false;
				}
				//用户未认证的情况下，如果
				if (!this.loadingShiming && !this.hasCertification) {
					uni.showToast({
						icon: 'none',
						title: '请完成实名认证'
					});
					return;
				}
				if (!this.isXuzu && (!this.address || !this.address.id)) {
					// 正常下单需校验地址；续租的话沿用老地址
					uni.showToast({
						icon: 'none',
						title: '请填写收货地址'
					});
					return;
				}
				//下单前要人脸拍照，拍的啥就不知道了
				this.showUploadSelfPhoneModal()

				// if (this.isBuyOutOrSend != 1 && this.productDescDetail.faceRecognition) {
				// 	//先享后付才要征求用户拍照，如果是全额支付就不走人脸拍照
				// 	this.showUploadSelfPhoneModal();
				// } else if (this.isBuyOutOrSend != 1 && !this.productDescDetail.faceRecognition) {
				// 	console.log('------------===1');
				// 	return
				// 	let isIosEnv = uni.getSystemInfoSync().platform
				// 	if (isIosEnv == 'ios') {
				// 		let timer1 = null
				// 		timer1 = setTimeout(() => {
				// 			window.open(this.productDescDetail.certifyUrl);
				// 			clearTimeout(timer1);
				// 			timer1 = null
				// 		}, 100); // 延迟0.5秒
				// 	} else {
				// 		window.open(this.productDescDetail.certifyUrl, "_blank");
				// 	}
				// } else {
				// 	this.onOkCallback();
				// }
			},
			showUploadSelfPhoneModal() {
				this.showUploadPhoneModal = true;
			},
			onOkCallback() {
				// #ifdef H5 || APP-PLUS
				//租赁不支付  直接提交订单
				// if (this.isBuyOutOrSend != 2 && !this.weixinCheckedState && !this.zhifubaoCheckedState) {
				// 	//此时是全额支付，需要弹起支付方式选择弹窗。
				// 	this.$refs.PaymentSelect.show()
				// 	return
				// }
				// #endif
				uni.showLoading({
					title: '提交订单中'
				});
				const {
					url,
					data
				} = this.generateOrderSubmitUrlAndData();
				console.log('====租赁提交订单submit的参数=====', data);
				data.isauth = this.isauth;
				this.$request(url, data, 'post', false, false, {}, false, false)
					.then((res) => {
						if (res.businessSuccess) {
							uni.showToast({
								title: '下单成功',
								icon: 'none',
								duration: 1000
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/orderList/orderList'
								});
							}, 1000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							});
						}
						return
						if (res.success || res.businessSuccess) {
							data.uid = this.$getUid();
							console.log('--拉起支付返回的参数--', res);
							// #ifdef  MP-WEIXIN
							// 0元购   微信下单   freezeUrl：null   wechatOrderMap:null
							if (res.data.freezeUrl == null && res.data.wechatOrderMap == null) {
								uni.redirectTo({
									url: '/pagesMy/orderList/orderList?isBuyOutOrSend=' + this.isBuyOutOrSend
								});
							} else if (res.data.wechatOrderMap) {
								wx.requestPayment({
									timeStamp: res.data.wechatOrderMap.timeStamp, //时间戳
									nonceStr: res.data.wechatOrderMap.nonceStr, //随机字符串
									package: res.data.wechatOrderMap.package,
									signType: 'RSA', //签名算法
									paySign: res.data.wechatOrderMap.paySign, //签名
									success: function(res) {
										uni.hideLoading();
										uni.showToast({
											title: '支付成功',
											icon: 'none'
										});
										uni.redirectTo({
											url: '/pagesMy/orderList/orderList'
										});
									},
									fail: function(err) {
										uni.hideLoading();
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										});
										uni.redirectTo({
											url: '/pagesMy/orderList/orderList'
										});
									},
									complete: function(res) {
										console.log('支付完成');
									}
								});
							}
							// #endif
							// #ifdef APP-PLUS
							if (!!res.data.freezeUrl) {
								let useTradeSta = !res.data.serialNo ? true : false;
								tradePay(res.data.freezeUrl, useTradeSta)
									.then((res) => {
										uni.hideLoading();
										if (res.resultCode === '9000') {
											this.weixinCheckedState = false,
												this.zhifubaoCheckedState = false,
												uni.showToast({
													title: '支付成功',
													icon: 'none',
													duration: 1000
												});
											setTimeout(() => {
												uni.showToast({
													icon: 'none',
													title: '完成支付'
												});
												uni.redirectTo({
													url: '/pagesMy/orderList/orderList'
												});
											}, 1000);
										} else {
											this.weixinCheckedState = false,
												this.zhifubaoCheckedState = false,
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													duration: 1000
												});
											setTimeout(() => {
												uni.showToast({
													icon: 'none',
													title: '未完成支付'
												});
												uni.redirectTo({
													url: '/pagesMy/orderList/orderList'
												});
											}, 1000);
										}
									})
									.catch((e) => {
										this.weixinCheckedState = false,
											this.zhifubaoCheckedState = false,
											uni.hideLoading();
										uni.showToast({
											title: '订单异常'
										});
										uni.redirectTo({
											url: '/pagesMy/orderList/orderList'
										});
									});
							} else if (this.weixinCheckedState && res.data && res.data.wechatOrderMap) {
								//选择微信付款
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										appid: res.data.wechatOrderMap
											.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										noncestr: res.data.wechatOrderMap.nonceStr, // 随机字符串
										package: res.data.wechatOrderMap.packageVal, // 固定值
										partnerid: res.data.wechatOrderMap.partnerId, // 微信支付商户号
										prepayid: res.data.wechatOrderMap.prepayId, // 统一下单订单号
										timestamp: res.data.wechatOrderMap.timestamp, // 时间戳（单位：秒）
										sign: res.data.wechatOrderMap.sign // 签名，这里用的 MD5/RSA 签名
									}, //此处为服务器返回的订单信息字符串
									success: function(res) {
										this.weixinCheckedState = false,
											this.zhifubaoCheckedState = false,
											uni.hideLoading();
										setTimeout(() => {
											uni.showToast({
												icon: 'none',
												title: '支付成功'
											});
										}, 1500);
									},
									fail: function(err) {
										this.weixinCheckedState = false,
											this.zhifubaoCheckedState = false,
											uni.hideLoading();
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 1000
										});
										setTimeout(() => {
											uni.showToast({
												icon: 'none',
												title: '未完成支付'
											});
											uni.redirectTo({
												url: '/pagesMy/orderList/orderList'
											});
										}, 1000);
									}
								});
							} else {
								this.weixinCheckedState = false,
									this.zhifubaoCheckedState = false,
									setTimeout(() => {
										uni.redirectTo({
											url: '/pagesMy/orderList/orderList?isBuyOutOrSend=' + this
												.isBuyOutOrSend
										});
									}, 1000);
							}
							// #endif
							// #ifdef H5
							if (!!res.data.freezeUrl) {
								this.weixinCheckedState = false,
									this.zhifubaoCheckedState = false,
									window.location.href = res.data.freezeUrl;
							} else if (this.weixinCheckedState && res.data && res.data.wechatOrderMap) {
								this.weixinCheckedState = false,
									this.zhifubaoCheckedState = false,
									window.location.href = res.data.wechatOrderMap.h5_url;
							} else {
								this.weixinCheckedState = false,
									this.zhifubaoCheckedState = false,
									setTimeout(() => {
										uni.redirectTo({
											url: '/pagesMy/orderList/orderList?isBuyOutOrSend=' + this
												.isBuyOutOrSend
										});
									}, 1000);
							}
							// #endif
							// #ifdef  MP-ALIPAY
							uni.showLoading({
								title: '提交订单中'
							});
							if (!!res.data.freezeUrl) {
								let useTradeSta = !res.data.serialNo ? true : false;
								tradePay(res.data.freezeUrl, useTradeSta)
									.then((res) => {
										uni.hideLoading();
										if (res.resultCode === '9000') {
											uni.showToast({
												title: '支付成功',
												icon: 'none',
												duration: 1000
											});
											setTimeout(() => {
												uni.showToast({
													title: '完成支付'
												});
												uni.redirectTo({
													url: '/pagesMy/orderList/orderList'
												});
											}, 1000);
										} else {
											setTimeout(() => {
												uni.redirectTo({
													url: '/pagesMy/orderList/orderList'
												});
											}, 1000);
										}
									})
									.catch((e) => {
										uni.hideLoading();
										uni.showToast({
											title: '订单异常'
										});
										uni.redirectTo({
											url: '/pagesMy/orderList/orderList'
										});
									});
							} else {
								uni.redirectTo({
									url: '/pagesMy/orderList/orderList?isBuyOutOrSend=' + this
										.isBuyOutOrSend
								});
							}
							// #endif
						} else {
							console.log('判断用户是否有领取过额度1', this.userReceive);
							uni.hideLoading();
							let msg = res.msg || res.errorMessage || '请联系客服稍后再试';
							if (res.errorCode === '999999') {
								if (/input/.test(msg) || (/idex_order_id/.test(msg) && /Duplicate/.test(msg))) {
									this.showOrderDupli = true;
								} else {
									uni.showToast({
										icon: 'none',
										title: msg
									});
								}
							} else {
								if (this.userReceive == '1') {
									uni.showToast({
										title: msg,
										icon: 'none',
										duration: 2000
									});
								} else {
									uni.showToast({
										title: '您暂未领取额度，请先领取额度!',
										icon: 'none',
										duration: 2000
									});
								}
								setTimeout(() => {
									uni.redirectTo({
										url: '/pagesOther/commission-rich/commission-rich'
									});
								}, 2000);
							}
						}
					})
					.catch((e) => {});
			},
			confirmDuplicate() {
				uni.navigateTo({
					url: `/pagesMy/orderList/orderList?tab=all`
				});
			},
			cancelUpload() {
				this.showUploadPhoneModal = false;
				//掌心租下单前的拍照如果取消拍照不给下单
				// this.onOkCallback();
			},
			confirmlUpload() {
				this.uploadUserHadePhone();
			},
			partCoverCall() {
				this.onDingYue();
			},
			uploadUserHadePhone() {
				var that = this;
				uni.chooseImage({
					count: 1, //只能上传选择一张
					sizeType: ['compressed'],
					sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						uni.showLoading({
							title: '文件正在全力上传中，请耐心等待'
						});
						const tempFilePaths = res.apFilePaths || res.tempFilePaths || res.tempFiles;
						if (Object.prototype.toString.call(tempFilePaths) !== '[object Array]') {
							errHandler('请重新选择图片', true);
							return;
						}
						that.$fileUploadHandler(tempFilePaths[0], function(data) {
							uni.hideLoading();
							var imgUrls = JSON.parse(data.data).data;
							that.faceImgUrls = imgUrls;
							that.showUploadPhoneModal = false;
							that.onOkCallback();
						});
					},
					fail: () => {
						that.showUploadPhoneModal = false;
					}
				});
			},
			/**
			 * 返回提交订单所对应的接口名以及数据
			 */
			generateOrderSubmitUrlAndData() {
				let url = 'order/mall/liteUserOrders/submit';
				const data = {
					faceImgUrls: this.faceImgUrls,
					orderId: this.productDescDetail.orderId,
					addressId: this.address.id,
					nsfLevel: this.nsfLevel,
					antiCheatingLevel: this.antiCheatingLevel,
					skuId: this.skuId,
					duration: parseInt(this.duration),
					isBuyOutOrSend: this.isBuyOutOrSend,
					couponId: this.couponId,
					additionalServicesIds: this.servicesId,
					uid: this.$getUid(),
					remark: this.remark,
					num: this.skuNum,
					payType: 'alipays', //this.payType,
					// orderLocationAddress: this.orderLocationAddress,
					orderLocationAddress: this.jingweiLocationAdd,
					// #ifdef MP-ALIPAY
					redirect_url: 'alipays://platformapi/startapp?appId=' + APP_APPID +
						'&page=pagesMy/orderList/orderList',
					platformType: 'alipay',
					payType: 'alipays',
					// #endif

					// #ifdef MP-WEIXIN
					redirect_url: 'alipays://platformapi/startapp?appId=' + APP_APPID +
						'&page=pagesMy/orderList/orderList',
					platformType: 'wechat',
					payType: 'wechats',
					// #endif

					// #ifdef APP-PLUS
					redirect_url: globalData.infoByAppId.UrlSchemes + '://pagesMy/orderList/orderList',
					platformType: 'app',
					payType: (this.isBuyOutOrSend == 1 && this.zhifubaoCheckedState) ? 'alipays' : (this
						.isBuyOutOrSend == 1 && this.weixinCheckedState) ? 'wechats' : '',
					// #endif

					// #ifdef H5
					redirect_url: window.location.host + 'pagesMy/orderList/orderList',
					platformType: 'h5',
					payType: (this.isBuyOutOrSend == 1 && this.zhifubaoCheckedState) ? 'alipays' : (this
						.isBuyOutOrSend == 1 && this.weixinCheckedState) ? 'wechats' : '',
					// #endif
				};
				// }
				return {
					url,
					data
				};
			},


			getZulin() {
				return this.$request(
					'order/mall/liteUserOrders/findRentContract', {
						skuId: this.skuId,
						duration: this.duration,
						uid: this.$getUid(),
						isBuyOutOrSend: this.isBuyOutOrSend,
						num: this.skuNum,
						loading: true,
						appId: APP_APPID,
					},
					'post'
				).then((res) => {
					if (res.data) {
						this.pdfUrl = res.data;
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.remainRepaymentBox {
		box-sizing: border-box;
		padding: 20rpx 25rpx;

		.repayTie {
			// margin: 0 auto;
			margin-bottom: 20rpx;
			text-align: center;
			color: #909090;
		}

		.numPeriods {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.zero {
				position: relative;
				width: 48.8%;
				background-color: #ffffff;
				margin: 10rpx 0;
				box-sizing: border-box;
				padding: 30rpx 0;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top {
					font-size: 26rpx;
					font-weight: 600;
					margin-bottom: 5rpx;
				}

				.time {
					color: #909090;
					font-size: 20rpx;
				}

				.todayPay {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					writing-mode: vertical-rl;
					text-orientation: upright;
					letter-spacing: 0.1em; //文字间距
					transform: scale(0.9);
					transform-origin: 0% 0%;
					padding: 5rpx 0;
					border-radius: 10rpx 0 15rpx 0;
					z-index: 999999999;
					background-color: #fadb3e;
				}
			}

			&_item {
				position: relative;
				width: 48.8%;
				background-color: #ffffff;
				margin: 10rpx 0;
				box-sizing: border-box;
				padding: 30rpx 0;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top {
					font-size: 26rpx;
					font-weight: 600;
					margin-bottom: 5rpx;
				}

				.time {
					color: #909090;
					font-size: 20rpx;
				}

				.todayPay {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					writing-mode: vertical-rl;
					text-orientation: upright;
					letter-spacing: 0.1em; //文字间距
					transform: scale(0.9);
					transform-origin: 0% 0%;
					padding: 5rpx 0;
					border-radius: 10rpx 0 15rpx 0;
					z-index: 999999999;
					background-color: #fadb3e;
				}
			}
		}
	}

	.onOk_Btn_Tip {
		border-radius: 20px;
		font-size: 14px;
		height: 30px;
		padding: 0px 10px;
		transform: scale(0.8);
		line-height: 30px;
		color: #fff;
		position: absolute;
		top: -30px;
		background-color: black;
	}

	.onOk_Btn_Tip::after {
		content: ' ';
		right: 40px;
		background-color: #000;
		position: absolute;
		transform: rotate(45deg);
		bottom: -4px;
		width: 8px;
		height: 8px;
	}

	.confirm_rich {
		padding-bottom: 120rpx;
		background: #f5f5f5;

		.clamp {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

		}

		.b-b:after,
		.b-t:after {
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			border-bottom: 1px solid #e4e7ed;
			top: 88rpx;
			position: absolute;
			z-index: 3;
			left: 0;
			right: 0;
			height: 0;
			content: '';
		}

		.address-section_rich {
			background: #fff;
			position: relative;
			padding: 30rpx 0;

			.order-content_rich {
				display: flex;
				align-items: center;

				.iocn {
					margin-right: 20rpx;
					width: 20rpx;
					height: 20rpx;
				}

				.bottom-backgroind {
					width: 100%;
					bottom: 0;
					left: 0px;
					position: absolute;
					height: 8rpx;
				}
			}

			.icon-shouhuodizhi_rich {
				font-size: 44rpx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90rpx;
				color: #888;
			}

			.cen {
				color: #303133;
				font-size: 28rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.name {
				margin-right: 24rpx;
				font-size: 34rpx;
			}

			.address {
				color: #909399;
				margin-top: 16rpx;
				margin-right: 20rpx;
			}

			.icon-you {
				color: #909399;
				margin-right: 30rpx;
				font-size: 32rpx;
			}

			.a-bg-rich {
				display: block;
				width: 100%;
				height: 0rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}

		.goods-section-rich {
			background: #fff;
			margin-top: 16rpx;
			padding-bottom: 1px;

			.g-header-rich {
				height: 84rpx;
				padding: 0 30rpx;
				position: relative;
				display: flex;
				align-items: center;
			}

			.logo {
				width: 50rpx;
				height: 50rpx;
				display: block;
				border-radius: 100px;
			}

			.name {
				margin-left: 24rpx;
				font-size: 30rpx;
				color: #606266;
			}

			.g-item-rich {
				display: flex;
				margin: 20rpx 30rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 4rpx;
					flex-shrink: 0;
					display: block;
				}

				.right {
					flex: 1;
					padding-left: 24rpx;
					overflow: hidden;
				}

				.title {
					font-size: 30rpx;
					color: #303133;
				}

				.spec {
					font-weight: 400;
					line-height: 30rpx;
					font-size: 20rpx;
					color: #909399;
					font-family: PingFangSC-Regular, PingFang SC;

				}

				.price-box-rich {
					font-size: 32rpx;
					color: #303133;
					padding-top: 10rpx;
					display: flex;
					align-items: center;


					.price {
						margin-bottom: 4rpx;
					}

					.number {
						font-size: 26rpx;
						margin-left: 20rpx;
						color: #606266;
					}
				}

				.step-box {
					position: relative;
				}
			}
		}

		.fxpad {
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			display: flex;

		}

		.yt-list-rich {
			background: #fff;
			margin-top: 16rpx;


			.yt-list-cell-rich {
				padding: 10upx 30upx 10upx 40upx;
				line-height: 70upx;
				position: relative;
				display: flex;
				align-items: center;


				&.cell-hover {
					background: #fafafa;
				}

				&.b-b:after {
					left: 30upx;
				}

				.cell-icon {
					background: #f85e52;
					border-radius: 4upx;
					margin-right: 12upx;
					color: #fff;
					text-align: center;
					line-height: 32upx;
					height: 32upx;
					width: 32upx;
					font-size: 22upx;

					&.hb {
						background: #ffaa0e;
					}

					&.lpk {
						background: #3ab54a;
					}
				}

				.cell-more {
					margin-left: 8upx;
					margin-right: -10upx;
					color: #909399;
					align-self: center;
					font-size: 24upx;
				}

				.cell-tit {
					flex: 1;
					margin-right: 10upx;
					font-size: 26upx;
					color: #909399;
				}

				.cell-tip {
					font-size: 26upx;
					color: #303133;

					&.red {
						color: #fa436a;
					}

					&.active {
						color: #fa436a;
					}

					&.disabled {
						color: #909399;
					}


				}

				&.desc-cell {
					.cell-tit {
						// max-width: 90upx;
					}

					.placeholder {
						text-align: right;
					}

					.desc {
						font-size: 24upx;
						color: #303133;
					}

				}

				.integration {
					flex: 1;
					text-align: right;
					font-size: 24upx;
					color: #303133;
				}
			}
		}


		.coupon {
			background: #ffffff;

			.item1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.item2 {
				.text {
					border-radius: 5rpx;
					background-color: #fbedeb;
					padding: 2rpx 8rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #e52021;
				}

				.text2 {
					color: #e52021;
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}

		.arrow {
			margin-left: 12rpx;
			width: 10rpx;
			height: 16rpx;
		}

		.container-rich {
			background: #fff;
			margin-top: 20rpx;

			.item {
				.left {
					align-items: center;
					color: #999999;
					font-size: 26rpx;
					font-weight: 400;
					display: flex;


					.sm {
						margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.futit {
						color: #fff2c5;
						border-radius: 15rpx;
						padding: 1px 12rpx;
						font-size: 20rpx;
						font-weight: 400;
						margin-left: 10rpx;
						background: #1f2129;
					}
				}

				.right {
					display: flex;
					color: #333333;
					font-size: 26rpx;
					font-weight: 400;
					align-items: center;

					.checkIcon {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.servicesContent-rich {
			text-align: center;
			padding: 55rpx 0;
			color: #333333;
			font-size: 28rpx;
			font-weight: 400;
			min-height: 120rpx;
		}

		.PaymentSelectBox-rich {
			.tit {
				margin: 15rpx auto;
				letter-spacing: 0.1em;
				font-size: 34rpx;
				font-weight: 600;
				text-align: center;
			}

			.determine {
				width: 95%;
				height: 80rpx;
				border-radius: 100px;
				line-height: 80rpx;
				font-weight: 500;
				color: #fff;
				background-color: #269aff;
				text-align: center;
				margin: 40rpx auto;
				text-align: center;
				font-size: 32rpx;
			}
		}

		.coupons-rich {
			overflow: auto;
			padding-bottom: 30rpx;
			max-height: 750rpx;

			.coupon-item-rich {
				margin: 0 auto;
				margin-top: 20rpx;
				padding: 0 20rpx;
				width: 650rpx;
				height: 170rpx;
				display: flex;
				align-items: center;
				background: #ffffff;
				border-radius: 10rpx;
				justify-content: space-between;

				.item-left-rich {
					text-align: center;
					display: flex;

					.title {
						font-weight: 500;
						color: #ff4a26;
						font-size: 62rpx;
					}
				}

				.item-content-rich {
					margin-left: 47rpx;
					text-align: left;

					.title {
						color: #333333;
						margin-bottom: 10rpx;
						font-size: 28rpx;
						font-weight: 500;
					}

					.fu {
						color: #999999;
						display: flex;
						font-size: 22rpx;
						font-weight: 400;
						align-items: center;
					}
				}

				.item-right-rich {
					.checkIcon {
						margin-right: 20rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.hide {
			display: none;
		}

		.eachIssueTitle-rich {
			color: #999999;
			font-size: 24rpx;
			font-weight: 400;
			text-align: center;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
		}

		.eachIssue {
			padding-bottom: 60rpx;
			flex-wrap: wrap;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				text-align: center;
				position: relative;
				border-radius: 10rpx;
				margin-bottom: 22rpx;
				width: 334rpx;
				height: 129rpx;
				background: #ffffff;

				.mark {
					line-height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
					border-radius: 10rpx 0px 20rpx 0px;
					text-align: center;
					width: 93rpx;
					height: 28rpx;
					@include global-background-color();
					position: absolute;
					top: 0;
					left: 0;
				}

				.text1 {
					line-height: 33rpx;
					margin-top: 10rpx;
					color: #333333;
					font-size: 24rpx;
					font-weight: 500;
				}

				.text2 {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}

				.text3 {
					color: #999999;
					line-height: 30rpx;
					font-size: 22rpx;
					font-weight: 400;
				}
			}
		}

		.agreement-rich {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			margin-top: 20rpx;
			align-items: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #333333;
			width: 100%;
			font-weight: 400;

			.checked {

				height: 50rpx;
				margin-left: 20rpx;
				border: 10rpx solid transparent;
				width: 50rpx;
				position: relative;
			}

			.mengceng-rich {
				opacity: 0.4;
				background-color: #999999;
				height: 100vh;
				height: 100vh;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
			}

			.xieyi-tan-rich {
				width: 100%;
				height: 70vh;
				z-index: 1000;
				align-items: center;
				background-color: #fff;
				text-align: center;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				position: fixed;
				left: 0;
				bottom: 0;

				.scroll-xieyiy-rich {
					margin: 0 30rpx 30rpx;
					width: 100%;
					height: 100vh;
					overflow: auto;
				}
			}

			.xieyi-item-rich {
				margin: 10rpx;
				z-index: 9;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.nav_item-rich {
				text-align: left;
				white-space: pre-wrap;
				width: 100%;
				font-size: 28rpx;
				line-height: 1.45em;

				image {
					width: 100%;
				}
			}

			.item-yinsi-rich {
				width: 95vw;
				padding: 0 30rpx;
			}

			::-webkit-scrollbar {
				width: 0 !important;
				height: 0 !important;
				display: none;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.orOk {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-around;
				z-index: 9;
				position: fixed;
				bottom: 30rpx;
				width: 100%;
				height: 100rpx;
				padding-top: 20rpx;
				background-color: #fff;
			}

			.onok {
				border-radius: 50rpx;
				background-color: #ff8d07;
				line-height: 90rpx;
				color: #ffffff;
				width: 310rpx;
				height: 90rpx;
			}
		}


		.footer-rich {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			justify-content: space-between;
			display: flex;
			align-items: center;
			font-size: 30upx;
			background-color: #fff;
			z-index: 998;
			color: #606266;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 995;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

			.price-content-rich {
				padding-left: 30upx;
			}

			.price-tip-rich {
				color: #fa436a;
				margin-left: 8upx;
			}

			.price {
				font-size: 36upx;
				color: #fa436a;
			}

			.submit {
				padding: 0 50rpx;
				margin-right: 20rpx;
				line-height: 80rpx;
				background-color: #f35111;
				letter-spacing: 0.1em;
				border-radius: 50rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30upx;
			}
		}

		.xieyi {
			color: #f35111;
		}
	}
</style>